<template>
  <div class="net-config">
    <div class="system__icon wifi-icon" @click="open = !open">
      <WifiOutlined />
    </div>
    <Teleport to="body">
      <Animation enter-active-class="animate__slideInUp" leave-active-class="animate__slideOutDown">
        <a-card title="切换服务器" class="net-card" v-if="open" ref="targetRef" id="NetConfig">
          <template #extra>
            <div class="flex gap-1">
              <div class="system__icon" @click="create">
                <PlusOutlined />
              </div>
              <div @click="open = false" class="system__icon">
                <CloseOutlined />
              </div>
            </div>
          </template>
          <a-list
            item-layout="horizontal"
            bordered
            :data-source="developer.$state.developer.urlSelection"
          >
            <template #renderItem="{ item }">
              <a-list-item :class="{ active: item.value === developer.$state.developer.baseURL }">
                <a-list-item-meta>
                  <template #title>
                    <div v-if="!item.edit">{{ item.label }}</div>
                    <a-input
                      autofocus
                      placeholder="请输入标题"
                      v-else
                      v-model:value="item.label"
                    ></a-input>
                  </template>
                  <template #description>
                    <div v-if="!item.edit">{{ item.value }}</div>
                    <a-input placeholder="请输入地址" v-else v-model:value="item.value"></a-input>
                  </template>
                </a-list-item-meta>
                <template #actions>
                  <a-tooltip title="切换">
                    <a-button type="text" @click="change(item)">
                      <template #icon>
                        <SwapOutlined />
                      </template>
                    </a-button>
                  </a-tooltip>

                  <a-button type="text" @click="del(item)">
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                  </a-button>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </Animation>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { userLogout } from '@/api/modules/system/user/utils';
import useSystemStore from '@/store/system';
import type { URLSelection } from '@/store/system/types';
import { SwapOutlined, WifiOutlined } from '@ant-design/icons-vue';
import { onClickOutside } from '@vueuse/core';
import { Modal } from 'ant-design-vue';
import { nanoid } from 'nanoid';

const open = ref(false);
const targetRef = ref();
const developer = useSystemStore();

onClickOutside(targetRef, () => {
  onclose();
});

const onclose = () => {
  developer.$state.developer.urlSelection = developer.$state.developer.urlSelection.filter(e => {
    e.edit = false;
    if (!e.value && !e.label) return;
    return e;
  });
  open.value = false;
};
const change = (item: URLSelection) => {
  Modal.confirm({
    title: '切换服务器',
    content: '这将会刷新页面,且会清空登录信息',
    centered: true,
    async onOk() {
      developer.$state.developer.baseURL = item.value;
      await userLogout();
      window.location.reload();
    },
  });
};
const del = (item: URLSelection) => {
  developer.$state.developer.urlSelection = developer.$state.developer.urlSelection.filter(e => {
    return item.id !== e.id;
  });
};
const create = () => {
  developer.$state.developer.urlSelection.push({
    label: '',
    value: '',
    id: nanoid(),
    edit: true,
  });
};
</script>

<style lang="scss" scoped>
.net-card {
  width: 400px;
  height: 500px;
  position: absolute;
  bottom: 40px;
  right: 0;
  z-index: 99;
  border-radius: var(--radius);
  :deep(.ant-card-body) {
    height: calc(100% - 38px);
    overflow-y: auto;
  }
}
.wifi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  .icon {
    font-size: 18px;
  }
}
.active {
  * {
    color: var(--primary) !important;
  }
}
</style>
